<script lang="ts" setup>
import { defineProps } from 'vue'
interface IListArrModal {
    id: string;
    title: string;
    author: string;
    content: string;
    cover: string;
    type: number;
    status: number;
    createTime: string;
}
const props = defineProps<{
    listArr: IListArrModal[] | null
}>()
</script>
<template>
    <ul class="list">
        <li class="listItem" v-for="item in props.listArr" :key="item.id" @click="$emit('handleClick', item)">
            <!-- <a> -->
                <div class="listItemContent">
                    <div class="left">
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <div class="abstract">
                            {{ item.content }}
                        </div>
                    </div>
                    <div class="right">
                        <el-avatar shape="square" :size='80' fit="fill" :src="item.cover" />
                    </div>
                </div>
            <!-- </a> -->
        </li>
    </ul>
</template>
<style scoped>
.list .listItem {
    width: 100%;
    border-bottom: 1px solid rgba(228, 230, 235, 0.5);
    cursor: pointer;
    border-radius: 10px;
}

.list .listItem:hover {
    background-color: #c6e2ff;
    color: #fff;
}

.list .listItem .listItemContent {
    box-sizing: border-box;
    display: flex;
    padding: 10px;
    width: 100%;
}

.list .listItem .listItemContent .left {
    width: 80%;
}

.list .listItem .listItemContent .left .title {
    font-size: 16px;
    /* color: #252933; */
    padding: 2px 0 15px 0;
}

.list .listItem .listItemContent .left .abstract {
    font-size: 13px;
    line-height: 22px;
    /* color: #8a919f; */
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 限制在两行内显示文本 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* line-height: 1.6; */
    /* 根据你的具体需求设置行高 */
    /* max-height: 3.2em; */
    /* 行高乘以显示的行数，这里是1.6em * 2 */
    word-wrap: break-word;
}

.list .listItem .listItemContent .right {
    flex: 1;
}

.list .listItem .listItemContent .right {
    text-align: right;
}

.list .listItem .listItemContent .right img {
    border-radius: 4px;
    overflow: hidden;
}

.el-link,
::v-deep .el-link__inner {
    width: 100%;
}
</style>